<template>
  <div class="list pb-20">
    <fx-header fixed @back="back()" :back="false">
      <template #title>{{ $t('paymentMethod') }}</template>
    </fx-header>
    <ul class="payment-list-ul">
      <li class="flex px-4 justify-between pt-5 pb-10" v-for="(item, index) in methodList" :key="index">
        <div class="bank-after pl-10 ">
          <div class="bank-name">{{ item.methodName }}</div>
          <div class="py-2 bank-realName">{{ item.realName }}</div>
          <div class="bank-no">{{ item.paramValue1 }}</div>
        </div>
        <div @click="editInfo(item)">
          <img class="edit-img" src="@/assets/image/Record/edit.png" />
        </div>
      </li>
    </ul>
    <div class="px-4 pt-6 fixed-wrap">
      <van-button class="w-full" type="primary" @click="submit">{{ $t('AddPaymentMethod') }}</van-button>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _getPaymentMethod } from "@/service/trade.api.js";
import { useUserStore } from "@/store/user.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n()
const useStore = useUserStore();
const route = useRoute()
const router = useRouter()
const methodList = ref({})
onBeforeMount(async () => {
  // 获取支付列表
  _getPaymentMethod().then(res => {
    methodList.value = res
  })
})
const submit = () => {
  router.push('selectPay')
}
const editInfo = (val) => {
  console.log(val);
  sessionStorage.setItem("editAdd", JSON.stringify({ id: val.uuid, name: val.methodName, paramValue1: val.paramValue1, realName: val.realName, remark: val.remark }));
  router.push('add')
}
const back = () =>{
  router.push('/my/index')
}
</script>
<style lang="scss" scoped>
.list {
  padding-top: var(--van-nav-bar-height);
  color: $text_color;

  .payment-list-ul {
    position: relative;
    padding-bottom: 85px;
    // overflow: auto;
    // height: calc(100vh - 170px);

    li {
      background: $border_color;
      border-bottom: 1px solid $border_color;
      position: relative;

      .edit-img {
        width: 17px;
        height: 17px;
      }

      .bank-no {
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
      }

      .bank-name {
        font-size: 16px;
      }

      .bank-realName {
        font-size: 14px;
      }
    }

    .bank-after::after {
      width: 4px;
      height: 15px;
      background: #E7BB41;
      content: '';
      position: absolute;
      left: 15px;
      top: 15px;
    }

    .AI-after::after {
      width: 4px;
      height: 15px;
      background: #4BA6EB;
      content: '';
      position: absolute;
      left: 15px;
      top: 25px;
    }
  }

  .fixed-wrap {
    position: fixed;
    bottom: 0;
    height: 115px;
    // background: #fff;
    width: 100%;
  }
}
</style>